<template>
  <div class="tel-login">
      <div class="bar">
        <div class="bar-left" @click="back" v-if="isshow">
          <img src="../../../assets/img/common/back.svg" alt="">
        </div>
        <div class="bar-left" @click="backone" v-else>
          <img src="../../../assets/img/common/back.svg" alt="">
        </div>
        <div class="bar-center">
          <p>手机号登录</p>
        </div>
      </div>
      <div class="bottom">
        <div class="hint" v-if="isshow">
          <p>未注册手机号登录后将自动创建账号</p>
        </div>
        <div class="telnum" v-if="isshow">
          <input type="text" name="inputtelnum" placeholder="请输入手机号"
          oninput="if(value.length>11) value=value.slice(0,11)">
        </div>
        <div class="telnum" v-else>
          <input type="password" name="inputtelnum" placeholder="请输入密码">
        </div>
        <div class="nextstep" v-if="isshow">
          <button @click="login">下一步</button>
        </div>
        <div class="nextstep" v-else>
          <button @click="loginTruly">登录</button>
        </div>
      </div>
  </div>
</template>

<script>
  import {login,status} from "../../../network/login";
  export default {
        name: "TelLogin",
        data(){
            return{
                isshow:true,
                userinfo:{},
                telephone:0,
                password:0,
            }
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            backone(){
              this.isshow = true
            },
            login(){
                var input = document.getElementsByName('inputtelnum')
                var tel = input[0].value
                if(!(/^1[3456789]\d{9}$/.test(tel))){
                    this.$toast.show('手机号码输入有误')
                    return false
                }else {
                    this.isshow = false
                    this.telephone = tel
                    input[0].value = ''
                }
            },
            loginTruly(){
                var input = document.getElementsByName('inputtelnum')
                var password = input[0].value
                this.password = password
                var account ={
                    phone:this.telephone,
                    password:this.password,
                }
                login(account).then(res=>{
                    console.log(res)
                    if(res.data.code == '502'){
                        this.$toast.show('密码错误！')
                        input[0].value = ''
                    }else if(res.data.code == '200'){
                        document.cookie = `token=${res.data.token};path=/;`;
                        this.$toast.show("登录成功！")
                        this.userinfo = {
                            username:res.data.profile.nickname,
                            userhead:res.data.profile.avatarUrl,
                            userid:res.data.profile.userId,
                        }
                        this.$store.commit('afterlogin',this.userinfo)
                        this.$router.push('/find')
                        window.location.reload();  //刷新界面
                    }
                })
            },
        }
    }
</script>

<style scoped>
  .tel-login{
    background-color: white;
    position: relative;
    /*top: -44px;*/
    width: 100%;
    height:calc(100vh - 44px);
  }

  .bar{
    height: 44px;
    width: 100%;
    position: relative;
  }

  .bar-left{
    width: 60px;
    position: absolute;
  }

  .bar-left img{
    margin-top: 15px;
    margin-left: 20px;
    width: 25px;
    height: 25px;
  }

  .bar-center{
    line-height: 55px;
    position: absolute;
    left: 60px;
  }

  .bar-center p{
    font-weight: bolder;
    letter-spacing: 1px;
  }

  .bottom{
    /*background-color: yellow;*/
    height: calc(100vh - 44px);
    width: 100%;
    position: absolute;
  }

  .hint{
    margin-top: 30px;
    font-size: 13px;
    margin-left: 10px;
  }

  .telnum{
    text-align: center;
    margin-top: 15px;
  }

  .telnum input{
    width: 95%;
    height: 30px;
    border: none;
    border-bottom: 1px solid grey;
    outline: none;
  }

  .telnum input::placeholder{
    font-size: 13px;
  }

  .nextstep{
    width: 100%;
    text-align: center;
    margin-top: 25px;
  }

  .nextstep button{
    width: 95%;
    color: white;
    background-color: #FF3A3A;
    border: none;
    line-height: 30px;
    border-radius: 20px;
    font-size: 13px;
  }






</style>